<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<!-- <div class="main-header">
			<view class="status-bar" :style="{height:getStateHeight + 'px'}"></view>
			<view class="main-title" :style="{'height':getNavbar+'px',lineHeight:getNavbar+'px'}">
				岗位管理
			</view>
		</div> -->
		<navbar title="岗位管理"></navbar>
		<view class="item-box" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}" v-if="dataList.length>0">

			<delSlideLeft :item="item" :data_transit="{index:index,item:item}" @delItem="delItem"
				v-for="item in dataList" @leftMove="leftMove">
				<view class="item" @click="toDetail(item)" :key="item.id">
					<view class="item-line">
						<view class="item-title">
							{{item.title}}
						</view>
						<view class="item-price">
							{{item.isMianyi==1? '面议': (item.workSalary?item.workSalary+ '元/天':'面议') }}
						</view>
					</view>
					<view class="item-line">
						<text>{{item.workEducation=="不限"?"学历不限":item.workEducation}}</text>
						<text>{{item.workType=="不限"?"工作形式不限":item.workType}}</text>
					</view>
					<view class="item-tag" v-if="item.tip">
						<view v-for="tag in item.tip.split(',')">{{tag}}</view>
						<view v-if="item.isDaijiao==1">带教服务</view>
					</view>
					<view class="item-bottom">
						<view class="item-date">
							创建日期：{{item.timeCreate.split(" ")[0]}}
						</view>
						<view class="item-status" :class="[getStatusClass(item,'className')]">
							{{getStatusClass(item,'')}}
						</view>
					</view>
				</view>
			</delSlideLeft>
		</view>
		<empty v-else></empty>
		<view class="main-button" :style="{paddingBottom:getSafeBottom+'px'}" @click="addHandler()">
			<view class="main-button-add">
				发布新岗位
			</view>
		</view>
		<view class="main-bj">

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {
		getPostList,
		removeCompany
	} from "@/core/web-api/qiyeduan.js"
	import Empty from "@/components/Empty.vue"
	import delSlideLeft from '@/components/ay-operate/del_slideLeft.vue'
	export default {
		components: {
			Navbar,
			Empty,
			delSlideLeft
		},
		data() {
			return {
				dataList: [],
				bottomBtnHeight: uni.upx2px(90),
				page: {
					current: 1,
					limit: 10
				},
				filters: {
					keywords: "",
					status: "",
					isOk:null,
				},
				total: 0,
				move: {}
			}
		},
		methods: {
			delItem({
				item
			}) {
				removeCompany({
					id: item.id
				}).then(res => {
					if (res.code == 20000) {
						this.page.current = 1;
						this.getDataList();
					}
				})
			},
			leftMove(e) {
				if (e.id == this.move.id) return;
				this.move = e;
				this.dataList.forEach(item => {
					if (e.id != item.id) {
						item.txtStyle = "left:0";
					}
				})
				let index = this.dataList.findIndex(f => f.id == e.id)
				this.dataList[index].txtStyle = e.txtStyle
			},
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/ucenter/qiyeduan/gangwei/detail?id=" + item.id
				})
			},
			addHandler() {
				uni.navigateTo({
					url: "/pages/ucenter/qiyeduan/gangwei/add"
				})
			},

			/**
			 * 加载数据
			 */
			getDataList() {
				getPostList({
					...this.page,
					...this.filters
				}).then(res => {
					if (res.code == 20000) {
						const list = res.data.list;
						list.forEach(item => {
							item.txtStyle = "left:0"
						})
						if (this.page.current == 1) {
							this.dataList = list;
						} else {
							this.dataList.push(...list)
						}
						this.total = res.data.total
					}
				})
			},
			// 分页
			pageData() {
				if (this.total == this.dataList.length) return;
				this.page.current++;
				this.getDataList();
			},
		},
		onReachBottom() {
			this.pageData();
		},
		onLoad(options) {
			this.filters.status = options.status
			if(options.isOk){
				this.filters.isOk = options.isOk
			}
		},
		onShow() {
			this.page.current = 1;
			this.getDataList();
		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			getStatusClass() {
				return function(item, type) {
					let {
						status,
						isOk
					} = item;
					let dist = {
						0: {
							className: "publish",
							name: "已发布"
						},
						1: {
							className: "audio",
							name: "审核中"
						},
						3: {
							className: "",
							name: "草稿"
						},
						2: {
							className: "reject",
							name: "审核拒绝"
						}
					};
					if (status === 0 && isOk) {
						return type == "className" ? dist[0].className : dist[0].name
					} else if (status === 0 && !isOk) {
						return type == "className" ? "" : "已关闭"
					}
					return type == "className" ? (dist[status].className || "") : (dist[status].name || "")
				}
			}
		},
		created() {

		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			z-index: 10;

			&-add {
				width: 690upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				border-radius: 10upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				font-size: 30upx;
				color: #ffffff;
				margin-left: 30upx;
				box-sizing: border-box;
			}
		}
	}

	.item {
		&-box {
			width: 100%;
			margin-top: 30upx;
			position: static;
			z-index: 2;
		}

		width: 100%;
		border-radius: 8upx;
		background-color: #fff;
		padding:25upx 30upx 30upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			&:last-child {
				margin-bottom: 0;
			}

			text {
				font-size: 26upx;
				color: #666666;
				display: block;
				height: 26upx;
				line-height: 26upx;

				&:nth-child(2) {
					padding-left: 10upx;
					margin-left: 10upx;
					border-left: 2upx solid #666;
				}
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-price {
			font-size: 30upx;
			color: #0180ff;
		}

		&-tag {
			display: flex;
			flex-flow: wrap;
			margin-top: 15upx;

			view {
				font-size: 20upx;
				color: #333333;
				height: 38upx;
				padding: 0 14upx;
				border-radius: 19upx;
				background-color: #f6f6f6;
				margin-right: 20upx;
				line-height: 38upx;
			}
		}

		&-bottom {
			width: 100%;
			display: flex;
			margin-top: 25upx;
			padding: 30upx 0upx 0 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 2upx solid #f8f8f8;
		}

		&-date {
			font-size: 20upx;
			color: #999999;
		}

		&-status {
			font-size: 25upx;
			color: #999999;

			&.publish {
				color: #00cf7a;
			}

			&.audio {
				color: #fc637d;
			}

			&.reject {
				color: #ff0000;
			}
		}
	}
</style>
